<template>
  <div>
    {{getName}}
    <br />
    cname-{{cname}}
    <br />
    <button @click="changename">改变this.cname</button>
     <br />
      <button @click="changvuexname">vuex.cname</button>
  </div>
</template>


<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "app",
  data() {
    return {
      name: "zlt",
      cname: ""
    };
  },
  methods: {
    ...mapMutations(["changeName"]),
    changename() {
      this.cname = "cname";
    },changvuexname(){
          this.changeName("hahha");
    }
  },
  mounted() {
    setTimeout(() => {
      this.changeName("zhangcuicui");
    }, 2000);
  },
  computed: {
    ...mapGetters(["getName"])
  },
  watch: {
    getName: function(n, o) {
      if ((n !=o)) {
        this.cname = n;
      }
    }
  }
};
</script>
